<template>
	<!-- 推荐服务单位协同审批单 -->
	<div class="tenderContractDetails">
		<CommonTitle titleName="推荐服务单位协同审批单"></CommonTitle>
		<div class="contenForm">
			<el-form
				:inline="true"
				:model="state.formInline"
				class="demo-form-inline"
			>
				<el-row class="row-bg" justify="space-between">
					<el-col :span="24">
						<el-form-item label="审批单编号:" label-width="180">
							<el-input
								disabled
								v-model="state.formInline.referenceId"
								placeholder=""
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="关联项目:" label-width="180">
							<el-select
								disabled
								v-model="state.formInline.projectMainName"
								placeholder=""
							>
								<el-option label="" value="-" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="关联招标任务:" label-width="180">
							<el-input
								disabled
								v-model="state.formInline.projectTaskName"
								placeholder=""
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="招标项目类别:" label-width="180">
							<el-select
								disabled
								v-model="state.formInline.projectTypeExplain"
								placeholder=""
							>
								<el-option
									v-for="v in state.tenderType"
									:key="v.projectTypeId"
									:label="v.typeName"
									:value="v.projectTypeId"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="招标方式:" label-width="180">
							<el-select
								disabled
								v-model="state.formInline.tenderTypeExplain"
								placeholder=""
							>
								<el-option
									v-for="v in selectionTypeOptions"
									:value="v.value"
									:label="v.label"
									:key="v.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="相关业务部门:" label-width="180">
							<el-input
								disabled
								v-model="state.formInline.responsibleDepartmentName"
								placeholder=""
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="资金来源:" label-width="180">
							<el-input
								disabled
								v-model="state.formInline.fundsSource"
								placeholder=""
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="任务来源:" label-width="180">
							<el-input
								disabled
								type="textarea"
								:rows="4"
								v-model="state.formInline.taskSource"
								placeholder="多行输入"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<div class="overview-item-box d-flex m-t20 label" required>
							<el-select placeholder="请选择" v-model="projectForm.project">
								<el-option value="项目状况">项目状况</el-option>
								<el-option value="实施说明">实施说明</el-option>
								<el-option value="服务说明">服务说明</el-option>
							</el-select>
							<el-input
								class="m-l10"
								placeholder="请输入项目状况说明"
								disabled
								v-model="state.formInline.serviceExplain"
								v-if="projectForm.project === '项目状况'"
								type="textarea"
								:autosize="{ minRows: 4, maxRows: 4 }"
							/>
							<el-input
								class="m-l10"
								placeholder="请输入实施说明"
								disabled
								v-model="state.formInline.projectExplain"
								v-if="projectForm.project === '实施说明'"
								type="textarea"
								:autosize="{ minRows: 4, maxRows: 4 }"
							/>
							<el-input
								class="m-l10"
								placeholder="请输入服务说明"
								disabled
								v-model="state.formInline.effectExplain"
								v-if="projectForm.project === '服务说明'"
								type="textarea"
								:autosize="{ minRows: 4, maxRows: 4 }"
							/>
						</div>
					</el-col>
					<el-col :span="24">
						<div class="overview-item-box d-flex m-t20 label" required>
							<el-select placeholder="请选择" v-model="projectForm.control">
								<el-option value="预算控制价">预算控制价</el-option>
								<el-option value="最高限价">最高限价</el-option>
							</el-select>
							<el-input
								class="m-l10"
								placeholder="请输入预算控制价说明"
								v-model="state.formInline.budgetAmountExplain"
								v-if="projectForm.control === '预算控制价'"
								disabled
								type="textarea"
								:autosize="{ minRows: 4, maxRows: 4 }"
							/>
							<el-input
								class="m-l10"
								placeholder="请输入最高限价说明"
								disabled
								v-model="state.formInline.limitAmountExplain"
								v-if="projectForm.control === '最高限价'"
								type="textarea"
								:autosize="{ minRows: 4, maxRows: 4 }"
							/>
						</div>
					</el-col>
					<el-col :span="24">
						<el-form-item label="资格要求:" label-width="180">
							<el-input
								type="textarea"
								:rows="4"
								disabled
								v-model="state.formInline.qualificationExplain"
								placeholder="多行输入"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="支付方式说明:" label-width="180">
							<el-input
								type="textarea"
								:rows="4"
								disabled
								v-model="state.formInline.payTypeExplain"
								placeholder="多行输入"
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<div class="recommend m-t40">
			<div class="title">被推荐单位黑名单</div>
			<public-table
				class="m-t20"
				border
				index
				:isPaging="false"
				:page="page"
				:tableData="state.referenceCompanyList"
				:tableOption.sync="state.tableOption"
			>
			</public-table>
		</div>
		<div class="m-t40">
			<el-form>
				<el-row>
					<el-col :span="24">
						<el-form-item label="支付方式说明:" label-width="180">
							<el-input
								type="textarea"
								disabled
								:rows="4"
								v-model="state.formInline.user"
								placeholder="多行输入"
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<!-- 相关附件 -->
		<div class="card_box m-t40">
			<attachment-details pageType="view"></attachment-details>
		</div>

		<div class="title_ m-t40 m-b20">其他信息</div>
		<div class="other m-r20 d-flex">
			<div class="other_item d-flex">
				<div class="lebel">申请人</div>
				<div class="conetnt m-l10">{{ state.formInline.applyUserName }}</div>
			</div>
			<div class="other_item d-flex">
				<div class="lebel">申请部门</div>
				<div class="conetnt m-l10">
					{{ state.formInline.applyUserDeptName }}
				</div>
			</div>
			<div class="other_item d-flex">
				<div class="lebel">创建时间</div>
				<div class="conetnt m-l10">{{ state.formInline.createTime }}</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import { ElForm, ElCol, ElRow, ElUpload, ElCheckbox } from "element-plus";
import { ref, reactive, onMounted } from "vue";
import PublicTable from "@/components/PublicTable.vue";
import { approveApi, processApi } from "@/api/biddingProject";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import AttachmentDetails from "./components/AttachmentDetails.vue";
import { selectionTypeOptions } from "@/common/dict/dictCollect";
const router = useRouter();
const route = useRoute();
const store = useStore();
import { getURLhandler } from "@/views/constructionProjectManage/static/utools.js";

const tenderTaskId = getURLhandler(route.path).tenderTaskId;

const state = reactive({
	formInline: {
		user: "",
	},
	referenceCompanyList: [],
	tableOption: [
		{ label: "单位名称", prop: "companyName", width: 400 },
		{ label: "资信情况说明 ", prop: "creditExplain", width: 400 },
		{ label: "推荐理由说明", prop: "reasonExplain", width: 400 },
	],
	tenderType: [],
	fileList: [],
});

const projectForm = reactive({
	project: "项目状况",
	control: "预算控制价",
});

const getTypeList = () => {
	if (store.state.common.tenderType.length === 0) {
		processApi.getTypeList().then((res) => {
			if (res.code == 200) {
				state.tenderType = res.data;
				store.commit("set_tenderType", res.data);
			}
		});
	} else {
		state.tenderType = store.state.common.tenderType;
	}
};

const getReferenceInfo = () => {
	approveApi.getReferenceInfo(tenderTaskId).then((res) => {
		if (res.code == 200) {
			state.formInline = res.data;
			state.referenceCompanyList = res.data.referenceCompanyList;
			state.fileList = res.data.fileList;
		}
	});
};

onMounted(() => {
	getReferenceInfo();
	getTypeList();
});
</script>
<style lang="scss" scoped>
.tenderContractDetails {
	.contenForm {
		width: 100%;
		border-radius: 10px;
		border: 1px solid #e3e7f1;
		padding: 32px 72px 32px 0;
		.el-form-item,
		.el-select {
			width: 100%;
		}
		.el-col {
			margin-bottom: 15px;
		}
	}
	.card_box {
		border-radius: 10px;
		border: 1px solid #e3e7f1;
		padding: 20px 35px 40px 35px;
		.title {
			span {
				color: #f12527;
			}
			height: 16px;
			font-size: 16px;
			font-weight: bold;
			color: #1a1a1a;
			line-height: 40px;
		}
		.selecAll {
			line-height: 40px;
		}
		.el-button {
			border: 1px solid #fc7018;
			border-radius: 20px;
			color: #fc7018;
			width: 114px;
			height: 40px;
		}

		.card_content {
			padding: 0 69px;
			.file-content-item {
				.button-download {
					width: 77px;
					height: 32px;
					background: linear-gradient(180deg, #ffd091 0%, #ffa557 100%);
					border-radius: 4px;
					cursor: pointer;

					.icon {
						width: 18px;
						height: 18px;
					}
					span {
						color: #ffffff;
					}
				}
				.delete-icon {
					width: 20px;
					height: 20px;
					cursor: pointer;
				}
			}
		}
	}
	.other {
		border-radius: 10px;
		border: 1px solid #e3e7f1;
		padding: 32px 72px;
		justify-content: space-between;
		.other_item {
			.lebel {
				font-size: 16px;
				font-weight: 700;
				color: #1a1a1a;
				line-height: 40px;
			}
			.conetnt {
				width: 300px;
				height: 40px;
				background: #f7f7fa;
				border-radius: 4px;
				line-height: 40px;
				padding-left: 20px;
			}
		}
	}
	.title_ {
		font-size: 16px;
		font-weight: bold;
		color: #1a1a1a;
		line-height: 24px;
	}
	.recommend {
		width: 100%;
		border-radius: 10px;
		border: 1px solid #e3e7f1;
		padding: 22px 70px 34px 18px;
		.title {
			font-size: 16px;
			font-weight: bold;
			color: #1a1a1a;
			line-height: 24px;
		}
	}

	.overview-item-box {
		.el-select {
			width: 180px;
			margin-left: 10px;
		}
		.title-box {
			width: 200px;
		}
	}
}
:deep(.el-form-item__label, .fz_) {
	font-size: 12px !important;
}
:deep(.el-form-item__label) {
	width: 180px !important;
}
</style>
